<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuNing-index</title>
    <link rel="stylesheet" type="text/less" href="./assets/less/main.less" />
    <script src="./js/lib/less.min.js" ></script>
    <link rel="stylesheet" href="./js/lib/swiper/css/swiper.min.css">
</head>
<body>
    <!-- 主体容器 start -->
    <div class="sn_layout">
        <!-- 头部搜索 start -->
        <header class="sn_search">
            <a href="#" class="icon_category"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="60寸电视免费拿">
            </form>
            <a href="#" class="icon_cart"></a>
        </header>
        <!-- 头部搜索 end -->
        <!-- 轮播图 start -->
        <div class="sn_banner">
            <ul>
                <li><a href="#"><img src="./assets/images/banner/6.jpg" alt=""></a></li>
                <li><a href="#"><img src="./assets/images/banner/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./assets/images/banner/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./assets/images/banner/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./assets/images/banner/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="./assets/images/banner/5.jpg" alt=""></a></li>
                <li><a href="#"><img src="./assets/images/banner/6.jpg" alt=""></a></li>
            </ul>
            <ul>
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 轮播图 end -->
        <!-- 导航 start -->
        <nav class="sn_nav">
            <ul>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/1.png" alt="">
                        <p>天天低价</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/2.png" alt="">
                        <p>苏宁超市</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/3.png" alt="">
                        <p>苏宁拼购</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/4.png" alt="">
                        <p>5G手机</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/5.png" alt="">
                        <p>苏宁家电</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/6.png" alt="">
                        <p>免费水果</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/7.png" alt="">
                        <p>赚钱消消乐</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/8.png" alt="">
                        <p>签到有礼</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/9.png" alt="">
                        <p>领券中心</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/nav/10.png" alt="">
                        <p>更多频道</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- 导航 end -->
        <!-- swiper 轮播 start -->
        <div class="swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide"><a href="#"><img src="./assets/images/goods/1.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="./assets/images/goods/2.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="./assets/images/goods/3.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="./assets/images/goods/4.jpg" alt=""></a></li>
            </ul>
            <ul class="swiper-pagination">
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- swiper 轮播 end -->
        <!-- 底部页签 start -->
        <footer class="sn_tabs">
            <ul>
                <li>
                    <a href="">
                        <img src="./assets/images/footer/1.png" alt="">
                        <p>猜你喜欢</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/footer/2.png" alt="">
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/footer/3.png" alt="">
                        <p>必抢清单</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/footer/4.png" alt="">
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/footer/5.png" alt="">
                        <p>我的易购</p>
                    </a>
                </li>
            </ul>
        </footer>
        <!-- 底部页签 end -->
    </div>
    <!-- 主体容器 end -->
</body>
<!-- zepto 的核心功能 -->
<script src="./js/lib/zepto.min.js"></script>
<!-- zepto selector 模块  -->
<script src="./js/lib/zepto.selector.js"></script>
<!-- zepto 使用动画 -->
<script src="./js/lib/zepto.fx.js"></script>
<!-- zepto touch 手势事件 -->
<script src="./js/lib/zepto.touch.js"></script>
<!-- 引入 swiper -->
<script src="./swiper-3.4.2.min.js"></script>
<script src="./js/index.js"></script>
</html>